<html>
    <head>
	<link rel="shortcut icon" href="images/icon.png" rel="shortcut icon" href="images/icon.png" />
	<title>Atlas</title>
   
	<link rel="stylesheet" href="css/leaflet.less" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="initial-scale=0.8,  user-scalable=yes"> 
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body id ="index">
	<div  align = "center" id="index1" style=" width: 500px;  box-shadow: 0px 0px 10px #ffffff;   position:absolute;
	top:30%;
	left:50%;
	margin-top:-80px;
	margin-left:-250px;" >
		<p style="margin: 10px"> <img src="images/mainlogo.png"  ></p>
		<p style="margin: 10px">Login: <?php echo  $login; ?></p>
		
	
		
		<table id="table" class="font" cellpadding="5px" cellspacing="0" style="width: 400px;
		box-shadow: 0px 0px 5px #fff,0px 0px 5px #caf5fc,0px 0px 10px #caf5fc,0px 0px 5px #caf5fc;"  >
		
		<!-- смотри скрипт -->
		</table>
		
		<table class="font" style=" margin: 10px">
		<tr> 
			<td id= "Add" align="center" class="knopka" style="width: 158px; margin: 5px auto; height: 25px; ">
			Make changes
			</td>
			
			<td id= "Rem" align="center" class="knopka" style="width: 158px; margin: 5px auto; height: 25px: ">
			remove<span id="dev"></span>
			</td>
		</tr>
		</table>
		
			<div style="font-size: 10px; margin: 10px">
			<p>(For GPSLogger: IP 31.131.16.130  port 10001)</p>
			<p>(For GPS-Marker: IP 31.131.16.130  port 10002)</p>
			</div>
			
		
			
	</div>
    </body>
	<script>
	var countUzers = <?php echo  $countUzers; ?>;
	var arrUzers = <?php echo  $arrUzers; ?>;
	var login="<?php echo  $login; ?>";
	var gmt=<?php echo  $gmt; ?>;
	var stroka;
	var uzer = [];
	//alert(arrUzers);
	for ( var i=0; i<countUzers; i++){             // разбиваем юзеров на двумерный массив. uzer [порядковый номер юзера 0..1.. и тд][0-имей юзера, 1 имя юзера] 
      uzer[i] =  arrUzers[i].split("#");
	}
	//alert (uzer[0][2]);
	
	stroka="<tr>"+"<td style='border-bottom: 1px solid #7EBFC1;' colspan='4'  align='center' >"+"Time zone"+"</td>"+"</tr>";
	stroka+="<tr>"+"<td style='border-bottom: 2px solid #7EBFC1;'  align='center' >"+" "+"</td>" +"<td style='border-bottom: 2px solid #7EBFC1;'  align='center' >"+"GMT"+"</td>" + "<td style='border-bottom: 2px solid #7EBFC1;'  align='center' >"+gmt+"</td>"+ "<td style='border-bottom: 2px solid #7EBFC1;'  align='center' >"+"change to <input id='gmt' style='width: 25px' onkeyup='return proverka(this)' type='text'>"+"</td>"+ "</tr>";
	
	stroka+="<tr>"+"<td height='30px' style='border-bottom: 1px solid #7EBFC1;' colspan='4'  align='center' >"+""+"</td>"+"</tr>";
	
	stroka+= "<tr>"+"<td style='border-bottom: 1px solid #7EBFC1;' colspan='4'  align='center' >"+"Event"+"</td>"+"</tr>"; //event
	stroka=stroka+"<tr>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center' >"+""+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+"be notified"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+"inform event"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+"law confirm"+"</td>"+"</tr>";
	
	stroka+="<tr>"+"<td height='30px' style='border-bottom: 1px solid #7EBFC1;' colspan='4'  align='center' >"+""+"</td>"+"</tr>";
	stroka+= "<tr>"+"<td style='border-bottom: 1px solid #7EBFC1;' colspan='4'  align='center' >"+"Register device"+"</td>"+"</tr>";
	
	stroka=stroka+"<tr>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center' >"+"N"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+"imai/id"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+"devise name"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+"phone"+"</td>"+"</tr>";
	
	for (var i = 0; i<countUzers; i++){
	stroka=stroka+"<tr id='"+i+"' onclick='start(this)'  class='pointer'>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center' >"+(i+1)+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+uzer [i][0]+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+uzer [i][1]+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+uzer [i][2]+"</td>"+"</tr>";
	}
	
	var addDevise;
	
	addDevise="<tr>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center' >"+"new"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+"<input id='emai' onkeyup='return proverka(this)' type='text'>"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+"<input id='devise_name' type='text'>"+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+"<input id='phone' type='text'>"+"</td>"+"</tr>";
	
	document.getElementById('table').innerHTML=stroka+addDevise; 
	
	
function proverka(input) { 
    input.value = input.value.replace(/[^\d]/g, '');  // функция проверки ввода только цыфр
};	
	
	
	
	
	
	
	
	document.getElementById('Add').onclick=toDB;
var stroka1="";
function toDB(){
var emai=document.getElementById("emai").value;
var devise_name=document.getElementById("devise_name").value;
var contact ="0000";


if(emai!="" && devise_name!=""){

 s = $.ajax({  
				
			    type:'POST',
			    url:'adddevise.php',
			    data: 'countUzers='+countUzers+'&login='+login+'&emai='+emai+'&devise_name='+devise_name+ '&contact='+contact,
				async: false,
			   	success: function (data){ 
				//alert(data); 
				//proverka_popoln();
				
				},

	}).responseText;
					
	//alert(s); 
	if (s=="ok"){
	
	countUzers++;
	
	stroka1=stroka1+"<tr id='"+countUzers+"' onclick='start(this)'  class='pointer'>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center' >"+countUzers+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1;' align='center'>"+emai+"</td>"+"<td style=' border-bottom: 2px solid #7EBFC1; ' align='center'>"+devise_name+"</td>"+"</tr>";
	//location.reload();
	document.getElementById('table').innerHTML=stroka+stroka1+addDevise; 
	
	}
	
}else{
alert ("Поля не заполнены");
}

}
var id;
function start(obj){
id=obj.id;
//alert (id);

for(var i=0; i<countUzers; i++){
	document.getElementById(i).style.color="#000";
}

document.getElementById(id).style.color="blue";
document.getElementById('dev').innerHTML=": "+(parseInt(id)+1); 
}
	
	
		
	document.getElementById('Rem').onclick=remDB;
	
	function remDB(){
	
	alert("функция еще не подключена. Обратитесь к администратору")
	}
	
	
	
	</script>
	
   </html>

